<!--
 * @Author: jyq
 * @Date: 2022-07-01 10:11:28
 * @LastEditTime: 2022-07-08 11:35:15
 * @LastEditors: jyq
 * @Description: 
 * @FilePath: \dasantest2\day06\vue3-project\src\views\OrdersView.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="ShoppingCart">
   <van-nav-bar
   style="background-color: #f4f4f4; font-size: 19px;"
  title="购物车"
  left-arrow
  @click-left="onClickLeft"
 />
 <div v-if="!user" class="notlogo">
 <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/no_result/no_result_cart3.png" />
 <div class="text">
  登录后才能查看商品哦~
 </div>
 <van-button round @click="router.push('/login')">
 立即登录
 </van-button>

 </div>
 <div v-if="user&&!cardData" class="notlogo">
 <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/no_result/no_result_cart3.png" />
 <div class="text">
  目前你没有添加商品哦
 </div>
 <van-button @click="toHome()" round>
 去首页逛逛
 </van-button>
</div>
 
 
 <van-card v-if="user&&cardData"
        class="myCard"
        v-for="item in cardData"
        :key="item.id"
        :price="item.price"
        thumb="https://img.youpin.mi-img.com/shopmain/8ab6ae182b3c5394ac803188390df148.png@base@tag=imgScale&h=394&m=1&q=80&w=394"
        >
        <template #title>
            <div class="myCardTitle">
                {{item.name}}
                </div>
        </template>
           <template #desc>
        <van-row
          class="myRowTop"
          style="text-align:center;color:#333333;"
        >
          <van-col span="8"></van-col>
          <van-col span="8"></van-col>
          <van-col span="8">数量</van-col>
        </van-row>
        <van-row
          class="myRowBottom"
          style="text-align:center;color:#888888;"
        >
          <van-col span="8"></van-col>
          <van-col span="8"></van-col>
          <van-col span="8">{{item.number}}</van-col>

        </van-row>
      </template>
        
        </van-card>
        
<div class="recommend">
  <div class="recommendTitle">
  <img src="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/common/recheader_left.png" />
  <div class="text"> 为你推荐</div>
  <img src="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/common/recheader_right.png"/>
</div>
<div class="recommendShopping">
  <van-row gutter="20">
  <van-col 
  class="myCol"
  v-for="(item,index) in ShoppingDate"
   :span="12">
   <div class="card">
    <img :src="item.img" />
    <div class="title">
          {{item.title[1]}}
    </div>
   </div>
   </van-col>
</van-row>
</div>
</div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRouter} from "vue-router"
const router = useRouter()
 const onClickLeft = () => {
     router.push('/')
 };
 const toHome = ()=>{
  router.push('/')
 }
 const ShoppingDate = [
   {
    id:1,
    title:['','米家互联网洗烘一体机Pro 10kg 智能洗衣机'],
    tag:'必买宝',
    price:'2799',
    originprice:'3299',
    img:'https://img.youpin.mi-img.com/shopmain/8ab6ae182b3c5394ac803188390df148.png@base@tag=imgScale&h=394&m=1&q=80&w=394',
    desc:['8kg','洗烘-一体机','上排水',"洗涤容量","产品分类","排水方式"],
    bottom:['30天价保','6214','95%']
    },
     {
    id:2,
    title:['小米自营','米家互联网洗烘一体机Pro 10kg 智能洗衣机'],
    tag:'标签',
    price:'2799',
    originprice:'3299',
    img:'https://img.youpin.mi-img.com/shopmain/a57241dc6a82565c92f1dc78bbc3a792.png@base@tag=imgScale&h=394&m=1&q=80&w=394',
    desc:['8kg','洗烘-一体机','上排水',"洗涤容量","产品分类","排水方式"],
    bottom:['30天价保','6214','95%']
    },
     {
    id:3,
    title:['','米家互联网洗烘一体机Pro 10kg 智能洗衣机'],
    tag:'必买宝',
    price:'2799',
    originprice:'3299',
    img:'https://img.youpin.mi-img.com/shopmain/8ab6ae182b3c5394ac803188390df148.png@base@tag=imgScale&h=394&m=1&q=80&w=394',
    desc:['8kg','洗烘-一体机','上排水',"洗涤容量","产品分类","排水方式"],
    bottom:['30天价保','6214','95%']
    },
     {
    id:4,
    title:['小米自营','米家互联网洗烘一体机Pro 10kg 智能洗衣机'],
    tag:'标签',
    price:'2799',
    originprice:'3299',
    img:'https://img.youpin.mi-img.com/shopmain/a57241dc6a82565c92f1dc78bbc3a792.png@base@tag=imgScale&h=394&m=1&q=80&w=394',
    desc:['8kg','洗烘-一体机','上排水',"洗涤容量","产品分类","排水方式"],
    bottom:['30天价保','6214','95%']
    },
 ]
 const user = sessionStorage.getItem('user')
const cardData =ref(JSON.parse(localStorage.getItem('shoppingcart'))) 
</script>

<style lang="less" scoped>
.ShoppingCart{
  background-color: #f4f4f4;
.notlogo{
   padding: 40px 8px;
   margin-left: 130px;
  img{
   width: 90px;
  }
  .text{
    padding: 13px 8;
    font-size: 15px;
    margin-left: -30px;
    color: #666666;
  }
  --van-button-small-height:32px;
}
.recommend{
   background-color: #f4f4f4;
   height: 100%;
  .recommendTitle{
  display:flex;
  text-align: center;
  margin-left: 110px;
  .text{
     color: rgb(51,51,51);
     font-size: 15px;
     font-weight: bold;
     padding-right: 8px;
     padding-left: 8px;
    }
   img{
    width: 18px;
   }
}
.recommendShopping{
  margin-left: 12px;
  .myCol{
    border-radius: 6px;
    margin-top: 5px;
    margin-bottom: 5px;
    .card{
      background-color:#fff;
      height: 270px;
      border-radius: 12px;
      img{
        width: 171.5px;
      }
      .title{
      color: rgba(0,0,0,0.8);
      font-size:14px;
      line-height: 21px;
      text-align: left;
      padding: 0 6px;
      }
    }
  }
}
}

}

</style>